import React from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import SearchScreen from '../pages/search/search-screen';
import SupplierScreen from '../pages/supplier/supplier-screen';
import {getRealSize} from '../utils';
import IconFont from '../resource/iconfont';
import PreviewNavigator from './preview-navigator';
import PatientScreen from '../pages/order-form/patient-screen';
import ProductScreen from '../pages/order-form/product-screen';
import OtherScreen from '../pages/order-form/other-screen';
import {I18n} from '../reducers/intl';
import MapScreen from '../pages/search/map-screen';
import {Platform} from 'react-native';

const MyNavigator = createStackNavigator(
  {
    Search: SearchScreen,
    Supplier: SupplierScreen,
    Preview: PreviewNavigator,
    OrderFormPatient: PatientScreen,
    OrderFormProduct: ProductScreen,
    OrderFormOther: OtherScreen,
    SupplierMap: MapScreen,
  },
  {
    initialRouteName: 'Search',
    navigationOptions: ({navigation}) => {
      const options = {
        headerBackTitleStyle: Platform.OS === 'ios' && {
          height: 0,
          width: 0,
        },
        title: I18n.t('page.title.home'),
        tabBarIcon: ({focused, tintColor}) => (
          <IconFont
            name={focused ? 'molarmenu-home-fill' : 'molarmenu-home-half'}
            color={tintColor}
            size={getRealSize(22)}
          />
        ),
        tabBarVisible: navigation.state.index < 1,
      };
      return options;
    },
  },
);

export default MyNavigator;
